<template>
    
    <div>
        
        <div class="top">
            <div class="left">
                <h3>订单编号：{{ order.orderId }}</h3>
                <p>&nbsp;</p>
                <h3>订单金额：￥ {{ order.totalPrice }}</h3>
                <p>&nbsp;</p>
                <img id="code_img" src="../../assets/images/fukuan.png" alt="这是付款二维码"
                    style="width: 200px; height: 300px;" />
            </div>
            <p>&nbsp;</p>
            <input type="textarea" v-model="order.beizhu"> -->
        </div>

        <div class="right">
            <!-- <img id="code_img" src="../../assets/images/fukuan.png" alt="这是付款二维码" style="width: 200px; height: 300px;" /> -->

            <div class="fk">
                <span style="font-size: 14px;">请选择付款方式:</span>
                <div class="wx">
                    <img src="../../assets/images/weizhifu.jpg" alt="">
                    <button @click="wx">微信支付</button>
                </div>
                <div class="zfb">
                    <img src="../../assets/images/zhifubao.jpg" alt="">
                    <button @click="wx">支付宝支付</button>
                </div>
                <div class="yh">
                    <img src="../../assets/images/wangyin.jpg" alt="">
                    <button @click="wx">银行卡支付</button>
                </div>
            </div>
            
        </div>
        
    </div>

<!-- Form -->

    
</template>

<script>

export default {
    data() {
        return {
            order:
            {
                orderId: "123",
                totalPrice: "34",
                shou: "张三",
                beizhu: "",
                address: {

                }
            },

        }
    },
    methods: {
        wx() {
            alert("支付成功！")
            // orderId,userId,totalPrice,address存进订单表中
            this.$router.push('/order')
        }
    },
}
</script>

<style scoped >
.address {
    font-size: 15px;
    width: 200px;
}

select {
    margin: 5px 10px
}

button {
    width: 70px;
    height: 30px;
    font-size: 12px;
    margin: 0 10px;
}

.fk {
    display: flex;
}

.wx img {
    width: 100px;
    height: 60px;
}

.zfb img {
    width: 100px;
    height: 60px;
}

.yh img {
    width: 100px;
    height: 60px;
}

.top {
    margin: 10px 20px;

}

.left {
    width: 300px;

    margin-left: 30px;
}

.right {
    width: 500px;
    height: 500px;
    margin-left: 50px;
    margin-top: 10px;
}

.fk {
    margin: 30px 0;
}
</style>